<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>项目详情</title>
<link rel="stylesheet" href="__ROOT__/Public/css/swipeslider.css">
<link rel="stylesheet" href="__ROOT__/Public/mcss/css.css?1">
<link href="__ROOT__/Public/css/style3.css" rel="stylesheet">
<style type="text/css">
    .bianji{width: 94%;padding:0 3%;height: 50px;line-height: 50px;}
    .bianji1{width: 94%;padding:0 3%;height: 70px;line-height: 70px;}
    .bianji_p1{float: left;}
    .bianji_i1{font-size:14px;color:#a6b2be;float: right;margin-left: 6px;}
    .bianji_p2{float: right;color: #647686;height: 50px;line-height: 50px;width: 50%;text-align: right;}
    .bianji_img1{width: 50px;height: 50px;border-radius: 100%;float: right;margin: 10px 0}
    .register_d{font-size: 15px;}
	.zhezhao_boxa{width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: none;}
    .opentca img{border-radius: 5px;position: fixed;top: 50%;margin-top: -60px;left: 50%;margin-left:-30px;opacity: 0.6;}
    .zhezhao_boxb{width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: none;background: rgba(0,0,0,0.5);}
    .opentcb{width: 70%;padding: 30px 5% 20px;background: #fff;border-radius: 5px;position: relative;left: 10%;top: 50%;margin-top: -100px;overflow: hidden;text-align: center;}
    .opentcb_p1{font-size: 13px;font-size: 16px;text-align: center;}
    .opentcb_divl{font-size: 14px; width: 50%;height: 44px;line-height: 44px;position: absolute; bottom: 0;left: 0;border-top: 1px solid #f4f7f9;}
    .opentcb_divr{font-size: 14px; width: 50%;height: 44px;line-height: 44px;position: absolute; bottom: 0;right: 0;background: #008ae0;color: #fff;}
    .opentcb_divc{font-size: 14px; width: 100%;height: 44px;line-height: 44px;position: absolute; bottom: 0;right: 0;background: #008ae0;color: #fff;}
    .zhezhao_boxc{width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: none;}
    .opentcc{background: rgba(0,0,0,0.7);width: 50%;padding: 20px 2%;font-size: 14px;color: #fff;text-align: center;border-radius: 5px;position: fixed;left: 23%;top: 50%;margin-top: -50px;}
    .opentcd{width: 70%;padding: 7% 5% 20px;background: #fff;border-radius: 5px;position: relative;left: 10%;top: 50%;margin-top: -100px;text-align: center;}
    .opentcd_p1{font-size: 13px;font-size: 16px;text-align: center;}
    .opentcd_divc{font-size: 14px; width: 100%;height: 44px;line-height: 44px;position: absolute; bottom: 0;right: 0;background: #ff4453;color: #fff;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
    .opentcd_divcc{font-size: 14px; width: 100%;height: 44px;line-height: 44px;position: absolute; bottom: 0;right: 0;background: #7a7ae7;color: #fff;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
    .zhezhao_boxd{width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: none;background: rgba(0,0,0,0.5);}
    .opentcd_img{width: 40%;position: absolute;top: -35%;left: 30%;}
    .order_fj_check {position: absolute;display: inline-block;width: 20px;height: 20px;background: #ccc;border-radius: 20px;left: 8px;right: auto;}
	.order_fj_check::after {content: "";position: absolute;left: 4px;top: 5px;width: 50%;height: 25%;border: 2px solid #fff;border-radius: 0;border-top: none;border-right: none;background: transparent;transform: rotate(-45deg);}
	.icon-fanhui:before {
	  content: "\e601";
	}
	.apply_da{width:18%;float:left;text-align:center;}
	.apply_db{width:100%;}
	.apply_dc{font-size:12px;color:#666;text-align:center;line-height:18px;margin-top:0px;}
	.apply_soso{width:2.5%;float:left;border-top:2px dashed #4262f4;margin-top:30px;}
	
	.rightfloat {width: 40px;height: 40px;border: 1px solid #e5e5e5;border-radius: 100%;background: rgba(255,255,255,0.8);position: fixed;right: 10px;bottom: 18%;z-index: 2;text-align: center;}
	.rightfloat img{width: 22px; margin-top: 9px;}
</style>
</head>
<body>
<form>
	<div class="dtop">
		<div class="dtopl" onclick="location.href=&#39;javascript:history.back();&#39;">
			<img class="dtopl_img" src="__ROOT__/Public/images/back.png"/>
		</div>
		<div class="dtopc">详情介绍</div>
		<div class="dtopr"></div>
	</div>
	<div style="height: 51px;"></div>

	<figure id="full_feature" class="swipslider">
		<ul class="sw-slides">
			<!-- 建议尺寸750px*230px -->
			<?php foreach(json_decode($list['lists_img'],true) as $val){ ?>
			<li class="sw-slide">
				<img class="guanggao" src="{$list['path']}{$val}"/>
			</li>
			<?php } ?>
		</ul>
	</figure>
	<div style="height: 15px;"></div>
	<div class="detail">
		<div class="detaila">{$list['title']}
			<!-- <span>{$list['reprice']}元</span> -->
		</div>

		<div class="detailb">
			<div class="detailc">每月25号审核上月提交数据</div>
			<div class="detaild"></div>
			<div class="clear"></div>
		</div>

		<div class="listc3" style="margin-top: 10px;">项目佣金：<span>{$list['reprice']}元</span></div>
		<div class="listc3" style="margin-top: 10px;">分销佣金：<span><?php echo round($list['reprice']*$system['one_fx']/100,2);?>元</span></div>
		<!--<div class="listc3" style="margin-top: 10px;">参与时间：<span><?php echo date('Y-m-d',$list['start_time']).'至'.date('Y-m-d',$list['end_time']); ?></span></div>-->
	</div>

	<div class="nav">
		<div class="nava">申请流程</div>
		<div class="cona">
		    <div class="apply_da">
		        <img src="__ROOT__/Public/images/apply1.png" class="apply_db"/>
		        <div class="apply_dc">提交返佣信息</div>
		    </div>
		    <div class="apply_soso"></div>
		    <div class="apply_da">
		        <img src="__ROOT__/Public/images/apply2.png" class="apply_db"/>
		        <div class="apply_dc">进入联通申请页</div>
		    </div>
		    <div class="apply_soso"></div>
		    <div class="apply_da">
		        <img src="__ROOT__/Public/images/apply3.png" class="apply_db"/>
		        <div class="apply_dc">提交到联通申请</div>
		    </div>
		    <div class="apply_soso"></div>
		    <div class="apply_da">
		        <img src="__ROOT__/Public/images/apply4.png" class="apply_db"/>
		        <div class="apply_dc">等待联通员工上门办理</div>
		    </div>
		    <div class="apply_soso"></div>
		    <div class="apply_da">
		        <img src="__ROOT__/Public/images/apply5.png" class="apply_db"/>
		        <div class="apply_dc">审核通过</div>
		    </div>
		    <div class="clear"></div>
		</div>
	</div>
	<div class="nav">
		<div class="nava">套餐介绍</div>
		<div class="cona"><?php echo htmlspecialchars_decode($list['package']); ?></div>
	</div>
	<div class="nav">
		<div class="nava">佣金详情</div>
		<div class="recdtld">
			<table border="1" align="center">
				<tbody><tr>
					<th>周期</th>
					<th>佣金</th>
				</tr>
				<?php foreach(json_decode($list['commission'],true) as $key=>$val){ ?>
				<tr>
					<td>T{$key}</td>
					<td>{$val}元</td>
				</tr>
				<?php } ?>
			</tbody></table>
		</div>
	</div>

	<div class="nav">
		<div class="nava">详情介绍</div>
		<div class="cona"><?php echo htmlspecialchars_decode($list['content']); ?></div>
	</div>
	<div class="nav">
		<div class="nava">提交凭证信息</div>
		<?php if(!empty($list['note'])){ ?>
		<div class="form">
			<div class="form_tit" style="font-size: 14px;color: #ff7a7a;margin-bottom: 10px;">温馨提示：{$list['note']}</div>
		</div>
		<?php } ?>
		<?php if(true){ ?>
		<div class="form">
			<div class="form_tit"><span style="color: red">*</span>姓名</div>
			<div class="form_con">
				<div class="form_cond">
					<input class="form_cond_txt" id="name" type="text">
				</div>
			</div>
		</div>
		<div class="form">
			<div class="form_tit"><span style="color: red">*</span>手机号</div>
			<div class="form_con">
				<div class="form_cond">
					<input class="form_cond_txt" id="phone"  type="text">
				</div>
			</div>
		</div>
		<?php }else{ ?>
		<?php if($list['is_img']==1){ ?>
		<div class="form">
			<div class="form_tit">上传图片验证</div>
			<div class="form_con">
				<input type="file" style="display: none;" id="file" />
				<div id="img_box">
					
				</div>
				<div class="form_cona" onclick="$('#file').click()">
					<section id="grxx_tx" class="bianji_p2">
						<a id="logox">
							<img id="bgl" src="__ROOT__/Public/images/img.png"/>
						</a>
						<div class="clear"></div>
					</section>
				</div> 
				<!--<div class="form_cona"><img src="__ROOT__/Public/images/moren.jpg"/></div>-->
				<div class="clear"></div>
			</div>
		</div>
		<?php } ?>
		<?php if($list['is_txt']==1){ ?>
		<div class="form">
			<div class="form_tit">文字验证</div>
			<div class="form_con">
				<div class="form_cond">
					<textarea class="form_cond_txt" id="textval" placeholder="请输入文字验证"></textarea>
				</div>
			</div>
		</div>
		<?php } ?>
		<?php } ?>
		<div class="footb" id="savebtn">提交并申请</div>
	</div>

</form>

<div class="rightfloat" onclick="javascript:location.href='{:U('Home/Mobile/Home/poster',array('flag'=>2,'pid'=>$id))}'">
    <img src="__ROOT__/Public/images/haibao.png">
</div>

<!-- 提示 -->
<div class="zhezhao_boxc">
    <div class="opentcc"><p id="tips_content"></p></div>
</div>
<!-- 加载 -->
<div class="zhezhao_boxa">
    <div class="opentca"><img style="width: 50px;height: 50px;" src="__ROOT__/Public/images/loading2.gif"></div>
</div>
<!-- 提交后弹框 -->
<div class="zhezhao_boxd" >
    <div class="opentcd">
        <!--<div class="opentcd_img"><img src="img/lose.png" width="100%"></div>-->
        <p class="opentcd_p1"></p>
        <div style="height:44px;"></div>
        <div class="opentcd_divcc" onclick="javascript:location.href='{$list['url']}'">我知道啦</div>
    </div>
</div>
</body>
<script type="text/javascript" src="__ROOT__/Public/js/jquery.min.js" charset="utf-8"></script>
<script src="__ROOT__/Public/js/swipeslider.min.js"></script>
<script>
	var img = [];
	$('#file').on("change",function(e){
		console.log(e.target.files[0])
		var file = e.target.files[0];
		var reader = new FileReader();
		reader.readAsDataURL(file);
		// 渲染文件
		reader.onload = function (arg) {
			var html = '<img style="margin-left:5px;width: 100px;" src="'+arg.target.result+'"/>';
			$('#img_box').append(html);
			img.push(arg.target.result);
		}
	})
		
	$('#savebtn').click(function(){
		var formData = new FormData();
		var taskid = "{$list['taskid']}";
		
		var pid = "{$id}";
		formData.append("pid",pid);
		
		if(true){
			var name = $("#name").val();
			formData.append("name",name);
			
			var phone = $("#phone").val();
			formData.append("phone",phone);		
			
			var urls = "{:U('Home/Mobile/Detail/do_detail')}";
		}else{
			var is_img = "{$list['is_img']}";
			if(is_img==1){
				if(img.length!=0){
					$.each(img,function(i,item){
						formData.append("img"+i,convertBase64UrlToBlob(item));
					})
					formData.append("img_length",img.length);
				}else{
					$('#tips_content').html('请上传图片验证！');
					$('.zhezhao_boxc').show();
					setTimeout(function(){
						$('.zhezhao_boxc').hide();
					},1000);      		
					return;
				}
			}
					
			var is_txt = "{$list['is_txt']}";
			var textval = $("#textval").val();
			formData.append("textval",textval);
			if(textval==''&&is_txt==1){
			 	$('#tips_content').html('请输入文字验证！');
			 	$('.zhezhao_boxc').show();
			 	setTimeout(function(){
			 		$('.zhezhao_boxc').hide();
			 	},1000);      		
			 	return;
			}
			var urls = "{:U('Home/Mobile/Detail/do_other_detail')}";
		}

		//显示加载框
	    $(".zhezhao_boxa").show();
		$.ajax({
	        url: urls,
	        type : "POST",
	        data :formData,
	        dataType:"text",
	        processData : false,         
	        contentType : false,      
	        success:function(data){
	        	$('.zhezhao_boxa').hide();
	            if(data=='1'){
					$('.opentcd_p1').html('提交成功！');
					$('.zhezhao_boxd').show();
				}else if(data=='2'){				
					$('#tips_content').html('提交失败！');
				 	$('.zhezhao_boxc').show();
				 	setTimeout(function(){
				 		$('.zhezhao_boxc').hide();
				 	},1000); 
				}else{
					$('#tips_content').html(data);
				 	$('.zhezhao_boxc').show();
				 	setTimeout(function(){
				 		$('.zhezhao_boxc').hide();
				 	},1000); 
				}
	        }
	    });
	});
	
	function convertBase64UrlToBlob(urlData) {
		var bytes = window.atob(urlData.split(',')[1]);
		var ab = new ArrayBuffer(bytes.length);
		var ia = new Uint8Array(ab);
		for(var i = 0; i < bytes.length; i++) {
			ia[i] = bytes.charCodeAt(i);
		}
		return new Blob([ab], {
			type: 'image/jpg'
		});
	}

	//banner轮播开始
	$(window).load(function() {
	 $('#full_feature').swipeslider();
	 $('#content_slider').swipeslider({
	   transitionDuration: 600,
	   autoPlayTimeout: 10000,
	   sliderHeight: '300px'
	 });
	 $('#responsiveness').swipeslider();
	 $('#customizability').swipeslider({
	   transitionDuration: 1500, 
	   autoPlayTimeout: 4000, 
	   timingFunction: 'cubic-bezier(0.38, 0.96, 0.7, 0.07)',
	   sliderHeight: '30%'});
	});
	//banner轮播结束
</script>
</html>
